<template>
  <style>
	table td.photo {
		text-align:center
	}
	table td.photo .img {
		width: 80px;
		height: 80px;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		background-position: center center;	
		display:inline-block;
	}	
	</style>
	<theme-box title="群发消息查询">
		<form class="form-inline" @submit.prevent v-el:searchform>
			<div class="form-group">
				<label>消息种类：</label>
				<select class="form-control" v-el:searchtype>
					<option value="">全部</option>
					<option value="text">文本</option>
					<option value="image">图片</option>
					<option value="news">图文</option>					
				</select>
			</div>		 
			<form-date class="inline" label="&nbsp;开始日期:&nbsp;" name="beginTime" v-ref:begin></form-date>
			<form-date class="inline" label="&nbsp;结束日期:&nbsp;" name="endTime" v-ref:end></form-date>
			<v-button theme="warning" class="pull-right" @click="reset">重置</v-button>
			<v-button theme="primary" class="pull-right" @click="search">查询</v-button>
		</form> 
		<table class="table table-bordered table-striped fixed" v-el:table>
		</table>
	</theme-box>
</template>

<style scoped>
	.form-inline .btn+.btn {
		margin-right: 10px;
	}
	
	.form-inline .form-group+.form-group {
		margin-left: 20px;
	}
</style>

<script>
	import {
		deepClone
	}
	from 'lib/clone.js';
	import {dateFormat} from 'lib/method.js'
	
	let datatable;
	export default {
		data: () => ({
			dataSet: {
				data: [],
				recordsTotal: 0,
				recordsFiltered: 0
			},
			columnsSet: [],
			collection: {}
		}),
    events: {
      'table-reload': function () {
      	datatable.api().ajax.reload();
			}
    }, 		
		methods: {
			  reset() {
					this.$els.searchform.reset();
					datatable.api().ajax.reload();
				},
				search() {
					datatable.api().ajax.reload();
				},
				formatDate: function (value) {
					let date = new Date (value.replace(/-/g,"/"));
					let currentMonth = date.getMonth()+1+'';

					currentMonth = '00'.substr(0,2 - currentMonth.length)+currentMonth;

					let currentDate = date.getDate()+"";
					currentDate = '00'.substr(0,2 - currentDate.length)+currentDate;

					return ""+date.getFullYear()+currentMonth+currentDate;						
				},						
				setConfig() {
					//..加载配置			
						this.columnsSet = [
						{
								title: "消息id",
								className: "first-td",
								data: "id.msgId"							
						},
						{
								title: "消息种类",
								data: "msgType",
								width:"80px",	
							  className:"text-center",
							  render: function(data) {
									if(data == 'text') {
										return '文本'
									} else if(data == 'image') {
										return '图片'
									} else {
										//news
										return '图文'
									}
								}
						},	
						{
								title: "发送用户总数",
								data: "toUsr",
								width:"90px"
						},							
						{
								title: "内容",
								data: "content",
							  width:"200px"
						},
						{
								title: "封面",
								data: "media",
							  name: "photo",
						    className:"photo"
						},
						{
								title: "发送时间",
								data: "createTime",
							  render: function(data) {
									return dateFormat(data);
								}
						}								
					];
				},
				loadData(data = {}) {
									
					//..加载数据
					let self = this;
					return new Promise(function (resolve, reject) {
						self.$post({
							url: '/api/v1' + projectName_Url + '/wechat/mass/query.html',
							data
						}).then( response => {	
							if (response) {
								let content = response.content;
								self.dataSet.data = content.massList;
								self.dataSet.recordsTotal = content.total;
								self.dataSet.recordsFiltered = content.total;
								
								self.$set("collection",content.mediaList)
								return resolve();
							}
						}, response => {
							  return reject();
						});

					})
				}
		},
		created() {
			this.setConfig();
		},
		ready() {
			let self = this;

			datatable = $(this.$els.table).dataTable({
				"columns": self.columnsSet,
				"paging": true,
				"pagingType": "full_numbers",
				"lengthChange": false,
				"searching": false,
				"ordering": false,
				"info": true,
				"autoWidth": false,
				"serverSide": true,
				"processing": true,
				"fnCreatedRow": function (row, data, index) {			
					if(data.msgType=='text') {
						return false;
					}
					let dom = this.api().cell(row, 'photo:name').node();
					let text = $(dom).text();	
					self.$nextTick(()=>{
				
						let  obj = self.collection[text];
						if(obj&&obj.hasOwnProperty("url")&&obj.url) {
							let img = $('<div class="img"/>');
							img.css("background-image","url("+obj.url+")");
							$(dom).html(img);						
						} else {
							$(dom).text("无封面或该素材已经被删除");
						}
					})			
				},				
				"ajax": function (data, callback, settings) {

					let result = {};
					let _data = {};

					_data.aoData = JSON.stringify([{
						"name": "iDisplayStart",
						"value": 1 + data.start / data.length
									}, {
						"name": "iDisplayLength",
						"value": data.length
									}]);

					$(self.$els.searchform).find("input").each(function () {
						$(this).val($.trim($(this).val()));
					});
					
					_data.msgType = self.$els.searchtype.value;

					let start = self.$refs.begin.$els.date.value;
					if(start) {
						_data.beginDate = self.formatDate(start);
					}
					let end = self.$refs.end.$els.date.value;
					if(end) {
						_data.endDate = self.formatDate(end);
					}					

					self.loadData(_data).then(function () {
						result = self.dataSet;
						if (!result.data) {
							result.data = [];
						}
						callback(result);
					}, function () {
						result.data = [];
						callback(result);
					})

				}

			});
		}
	}
</script>